<template>
	<view class="c-comment">
		<image :src="info.user.avatar_url" mode="" class="user-avtr"></image>
		<view class="">
			<view class="user-name">{{info.user.nickname}}
				<!-- <text class="aite">@皮皮</text> -->
			</view>
			<view class="comment-content">{{info.content}}</view>
			<view class="comment-time">{{info.time_ago}} <text @click="$emit('reply',info)">回复</text></view>
			<view class="reply-box" v-for="item in info.replies" :key="item.id">
				<image :src="item.user.avatar_url" mode="aspectFill" class="reply-avtr"></image>
				<view class="">
					<view class="user-name">{{item.user.nickname}}</view>
					<view class="comment-content">回复<text
							class="user-name">{{item.rep_user.nickname}}</text>：{{item.content}}</view>
					<view class="comment-time">{{item.time_ago}} <text @click="$emit('reply',item)">回复</text></view>
					<!-- <view class="open-more">展开更多回复</view> -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "c-comment",
		props: {
			info: {
				typeof: Object,
				default: {}
			}

		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.c-comment {
		display: flex;
		margin-top: 24rpx;

		.user-avtr {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 24rpx;
		}

		.user-name {
			font-size: 30rpx;
			color: #8A8F99;
		}

		.comment-content {
			font-size: 30rpx;
			color: #333333;
			margin-top: 8rpx;

			.user-name {
				margin: 0 8rpx;
			}

		}

		.aite {
			color: #325EB2;
		}

		.comment-time {
			font-size: 26rpx;
			color: #8A8F99;
			margin-top: 8rpx;

			text {
				color: #5C5F66;
				margin-left: 8rpx;
			}
		}

		.reply-box {
			margin-top: 24rpx;
			display: flex;

			.reply-avtr {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				flex-shrink: 0;
				margin-right: 24rpx;
			}
		}

		.open-more {
			margin-top: 32rpx;
			font-size: 30rpx;
			color: #325EB2;
		}
	}
</style>